<template>
  <div class="app">
      <h2>我是App组件</h2>
      <h3>这是School组件传过来的学校名称: {{name}}</h3>
      <h3>这是School组件传过来的学校地址: {{address}}</h3>
      <hr>
      <!-- 子传父 自定义事件方法一 -->
      <!-- <School @haha='getName' /> -->
      <!-- 子传父 自定义事件方法二 -->
      <School ref="getName" />
  </div>
</template>

<script>
import School from './components/School.vue'
export default {
    name:'App',
    components:{School},
    data(){
        return {
            name:'',
            address:''
        }
    },
    // 子传父 自定义事件方法一
    //#region
    // methods: {
    //     getName(name,address){
    //         this.name = name;
    //         this.address = address;
    //     }
    // },
    //#endregion
    
    // 子传父 自定义事件方法二
    mounted(){
        this.$refs.getName.$on('haha',(name,address)=>{
            this.name = name;
            this.address = address;
        })
    }
}
</script>

<style>
    .app{
        background-color: rgb(225, 147, 228);
        padding: 30px;
    }
</style>